<template>
	<view class="volunteer-status flex--col">
		<view class="volunteer-heading flex--row">
			<text class="text--main-dark">服务状态</text>
			<image src="@/static/User.svg" class="icon--middle"></image>
		</view>
		<view class="status-detail flex--row flex--between">
			<view class="timing">
				<image :src="'../../static/assist/'+serviceStatus.icon" class="icon timing--icon"></image>
				<text class="timing-text text--secondary-dark">{{timing}}</text>
			</view>
			<view class="text--secondary-dark">
				 {{requestCount}}
			     <text class="text--thirdary-dark">个服务请求</text>
			</view>
		</view>
		<view class="status-button flex--row" @click="startOrStopService">
			<view class="func-button">
				<text class="text--thirdary-dark">{{serviceStatus.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import * as VolunteerApi from "@/api/assist/volunteer.js"
	import {STOP_SERVICE} from "@/core/constant/event.js"
	export default {
		emits:['changeServiceStatus'],
		props:['status','requestCount'],
		computed:{
			serviceStatus(){
				let icon = "fireOff.svg"
				let text = "开启服务"
				if(this.status === 1){
					icon = "fireOn.svg"
					text = "中断服务"
				}
				return {
					icon,text
				}
			}
		},
		data(){
			return {
				travelWaitId:0,
				timing:'00:00',
				requestDurationTimer:null
			}
		},
		methods:{
			/**
			 * 计算志愿服务等待时长
			 */
			regRequestDurationTimer(){
				let count = 0;
				this.requestDurationTimer = setInterval(()=>{
					count += 1
					if(this.status === 0){
						count = 0
						clearInterval(this.requestDurationTimer)
						this.timing = this.timingFormat(count)
					}
					this.timing = this.timingFormat(count)
				},1000)
			},
			/**
			 * 初始化服务状态
			 */
			async init(){
				await this.startService()
				if(this.travelWaitId){
					this.regRequestDurationTimer()
				}
			},
			async destroy(){
				if(this.requestDurationTimer){
					clearInterval(this.requestDurationTimer)
					this.requestDurationTimer = null
					this.timing = '00:00'
				}
				await this.stopService()
			},
			
			async startService(){
				const {pointX,pointY} = this.$store.getters.userPosition
				const {travelWaitId,status} = await VolunteerApi.startService({pointX,pointY})
				this.travelWaitId = travelWaitId
				this.$emit("changeServiceStatus",{status:status})
			},
			async stopService(){
				const {status} =await VolunteerApi.stopService({travelWaitId:this.travelWaitId})
				this.$emit("changeServiceStatus",{status:status})
			},
			/**
			 * 处理按钮点击事件
			 */
			async startOrStopService(){
				if(this.status === 0){
					await this.init()
				}else{
					await this.destroy()
				}
			},
			
			timingFormat(count){
				let timingStr = ""
				if(count === 0) return "00:00" 
				const minute = Math.floor(count/60)
				const second = count % 60
				timingStr += minute >= 10 ? `${minute}` : `0${minute}`
				timingStr += ":"
				timingStr += second >= 10 ? `${second}` : `0${second}`
				return timingStr
			},
		},
		mounted(){
			uni.$on(STOP_SERVICE,async() =>{
				await this.destroy()
			})
		},
		async beforeDestroy(){
			await this.stopService()
		}
		
	}
</script>

<style lang="scss" scoped>
	$color-black:#212529;
	$color-orange-light:#ff8d1a;
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark{
		font-size: 18px;
		font-weight: 600;
		color:#333;
	}
	
	.text--thirdary-dark{
		font-size: 14px;
		font-weight: 400;
		color:#333;
	}
	
	.volunteer-status{
		padding:18px 16px;
		@include border-four-roundings;
		gap:12px;
	}
	.volunteer-heading{
		 justify-content: space-between;
		 align-items: center;
	}
	.status-detail{
		margin-bottom: 12px;
		
		.timing-text{
			vertical-align: super;
		}
	}
	.status-button{
		justify-content: center;
		align-items: center;
	}
	
	.func-button{
		padding:4px 28px;
		border-radius: 40upx;
		border: 2upx solid #000;
		text-align: center;
		box-shadow: -8px -8px #ff8d1a;
		margin-left:10px;
		font-size: 16px;
		font-weight: 700;
		color: #333;
	}
</style>